<div class="ms-stepper-horizontal">
    <div class="ms-stepper-navigation-wrapper">
        <div class="ms-stepper-navigation" layout="row" layout-align="center center">
            <md-button class="ms-stepper-navigation-item"
                       ng-class="{'current': MsStepper.isStepCurrent(step.stepNumber), 'valid': MsStepper.isStepValid(step.stepNumber), 'disabled': MsStepper.isStepDisabled(step.stepNumber), 'optional': MsStepper.isStepOptional(step.stepNumber)}"
                       ng-click="MsStepper.gotoStep(step.stepNumber)"
                       ng-disabled="MsStepper.isStepDisabled(step.stepNumber)"
                       ng-repeat="step in MsStepper.steps" layout="row" layout-align="start center">

                <div class="step md-accent-bg"
                     layout="row" layout-align="center center">
                <span ng-if="!MsStepper.isStepValid(step.stepNumber) || MsStepper.isStepOptional(step.stepNumber)">
                    {{step.stepNumber}}
                </span>
                <span ng-if="MsStepper.isStepValid(step.stepNumber) && !MsStepper.isStepOptional(step.stepNumber)">
                    <i class="icon icon-check s18"></i>
                </span>
                </div>

                <div layout="column" layout-align="start start">
                    <div class="title">{{step.stepTitle}}</div>
                    <div class="subtitle" ng-if="MsStepper.isStepOptional(step.stepNumber)">Optional</div>
                </div>
            </md-button>
        </div>
    </div>

    <div class="ms-stepper-steps" ng-transclude></div>

    <div class="ms-stepper-controls" layout="row" layout-align="center center">
        <md-button class="md-accent md-raised"
                   ng-disabled="MsStepper.isFirstStep()"
                   ng-click="MsStepper.gotoPreviousStep()">
            Back
        </md-button>

        <div class="ms-stepper-dots">
            <span ng-repeat="step in MsStepper.steps"
                  ng-class="{'selected md-accent-bg':MsStepper.currentStepNumber === $index + 1}">
            </span>
        </div>

        <md-button class="md-accent md-raised"
                   ng-if="!MsStepper.isLastStep()"
                   ng-disabled="!MsStepper.isStepValid(MsStepper.currentStepNumber)"
                   ng-click="MsStepper.gotoNextStep()">
            Next
        </md-button>

        <md-button type="submit" class="md-accent md-raised"
                   ng-click="MsStepper.resetForm()"
                   ng-if="MsStepper.isLastStep()"
                   ng-disabled="!MsStepper.isFormValid()">
            Submit
        </md-button>
    </div>
</div>